<!-- eslint-disable vue/no-unused-vars -->
<template>
  <div class="main-aside">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
    >
      <h3 class="title">{{ isCollapse ? "后台" : "后台管理系统" }}</h3>
      <!-- 只有一级导航菜单的写法 -->
      <el-menu-item
        v-for="(item, index) in noChildren"
        :key="item.name"
        :index="`/main${item.path}`"
      >
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{ item.label }}</span>
      </el-menu-item>
      <!-- 有一二级导航的写法 -->
      <!-- 遍历一级菜单 -->
      <el-submenu
        v-for="item in hasChildren"
        :key="item.label"
        :index="item.label"
      >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">{{ item.label }}</span>
        </template>
        <!-- 二级菜单  遍历-->
        <el-menu-item-group
          v-for="secondMenu in item.children"
          :key="secondMenu.label"
        >
          <el-menu-item :index="`/main${secondMenu.path}`">{{
            secondMenu.label
          }}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
    <!-- computed的使用 -->
    <!-- <div>{{ isCollapse }}</div> -->
  </div>
</template>

<script>
import { MenuMixin } from "@/mixin/mixin.js";
import { Local } from "@/utils/storage.js";
import { mapState } from "vuex";
export default {
  mixins: [MenuMixin],
  props: {},
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState(["isCollapse"]),
  },
  watch: {},
  created() {},
  mounted() {
    console.log(this.msg);
    Local.set("token", 12233);
    console.log(Local.get("token"));
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
      console.log(this.noChildren);
      console.log(this.hasChildren);
      // console.log(this.isCollapse);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style scoped lang="less">
.main-aside {
  height: 100%;
  // width: 200px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  text-align: left;
}
.el-menu {
  height: 100vh;
  // width: 400px;
  .title {
    // text-align: center;
    padding-left: 20px;
    padding-top: 10px;
    white-space: nowrap;
    overflow: hidden;
  }
}
// .el-menu-item {
//   text-align: left;
// }
// .el-submenu__title {
//   text-align: left;
// }
</style>
